<!DOCTYPE html>
<!-- 设置文档语言为简体中文 -->
<html lang="zh-CN">
<head>
    <!-- 设置字符编码为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置视口，适配不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面标题 -->
    <title>3D翻页效果测试</title>
    <style>
        /* 重置body的外边距和内边距，使页面内容居中显示，设置透视效果以实现3D视觉 */
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            /* 透视效果，用于实现3D变换 */
            perspective: 1000px;
        }

        /* 书籍容器，设置相对定位和3D变换样式 */
        .book-container {
            position: relative;
            width: 400px;
            height: 600px;
            /* 开启3D变换，使子元素可以在3D空间中变换 */
            transform-style: preserve-3d;
        }

        /* 每一页的基础样式，设置绝对定位，以左侧为旋转原点，添加过渡效果 */
        .page {
            position: absolute;
            transform-origin: left;
            width: 100%;
            height: 100%;
            background-color: white;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            backface-visibility: hidden;
            /* 过渡效果，用于平滑翻页 */
            transition: transform 1s ease;
        }

        /* 设置第一页的层级和背景颜色 */
        .page:nth-child(1) {
            z-index: 4;
            background-color: aqua;
        }

        /* 设置第二页的层级和背景颜色 */
        .page:nth-child(2) {
            z-index: 3;
            background-color: rgb(255, 255, 170);
        }

        /* 设置第三页的层级和背景颜色 */
        .page:nth-child(3) {
            z-index: 2;
            background-color: rgb(255, 170, 255);
        }

        /* 设置第四页的层级和背景颜色 */
        .page:nth-child(4) {
            z-index: 1;
            background-color: rgb(170, 255, 255);
        }

        /* 向左翻页的样式，绕Y轴逆时针旋转180度 */
        .page.flipped-left {
            transform: rotateY(-180deg);
        }

        /* 向右翻页的样式，绕Y轴顺时针旋转180度 */
        .page.flipped-right {
            transform: rotateY(180deg);
        }

        /* 控制按钮的容器样式，设置绝对定位在底部 */
        .controls {
            position: absolute;
            bottom: 20px;
            display: flex;
            gap: 20px;
        }

        /* 按钮的基础样式 */
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 书籍容器，用于包裹所有页面 -->
    <div class="book-container">
        <!-- 第一页内容 -->
        <div class="page" data-page="1">
           这是书籍的开篇内容。
            这里开始介绍书籍的主题。
           书籍将带领你探索新知识。
           每一页都有精彩的内容。
           学习从这里开始。
           希望你享受阅读过程。
           知识是无穷无尽的宝藏。
           不断探索才能发现更多。
           让我们一起开启阅读之旅。
           祝你阅读愉快！
        </div>
        <!-- 第二页内容 -->
        <div class="page" data-page="2">
           现在进入第二页内容。
           这里会有新的知识点。
           学习就像攀登高峰。
           每一步都有收获。
           坚持就是胜利。
           知识改变命运。
           阅读是成长的阶梯。
           保持好奇心很重要。
           思考让知识更牢固。
           继续加油，你很棒！
        </div>
        <!-- 第三页内容 -->
        <div class="page" data-page="3">
           欢迎来到第三页。
           知识的海洋无尽头。
           探索未知的乐趣无穷。
           学习是一生的旅程。
           每一次阅读都是进步。
           与书籍为伴，不孤单。
           用知识武装自己。
           梦想从阅读开始。
           让书籍照亮前行的路。
           享受阅读带来的快乐。
        </div>
        <!-- 第四页内容 -->
        <div class="page" data-page="4">
           最后来到第四页。
           感谢你坚持阅读到这里。
           知识已在你心中扎根。
           继续阅读，不断成长。
           阅读是最好的投资。
           愿书籍成为你的挚友。
           期待你更多的阅读收获。
           阅读让生活更美好。
           知识是力量的源泉。
           本次阅读之旅暂告段落。
        </div>
    </div>
    <!-- 控制按钮容器 -->
    <div class="controls">
        <button id="prev-page">向左翻页</button>
        <button id="next-page">向右翻页</button>
    </div>

    <script>
        // 获取所有页面元素
        const pages = document.querySelectorAll('.page');
        // 获取向左翻页按钮
        const prevPageBtn = document.getElementById('prev-page');
        // 获取向右翻页按钮
        const nextPageBtn = document.getElementById('next-page');
        // 当前所在页码，初始为第一页
        let currentPage = 1;

        // 为向右翻页按钮添加点击事件监听器
        nextPageBtn.addEventListener('click', () => {
            // 如果当前页不是最后一页
            if (currentPage < pages.length) {
                // 获取当前页面对应的DOM元素
                const currentPageElement = pages[currentPage - 1];
                // 为当前页面添加向左翻页的样式类，触发翻页动画
                currentPageElement.classList.add('flipped-left');
                // 当前页码加1
                currentPage++;
            }
        });

        // 为向左翻页按钮添加点击事件监听器
        prevPageBtn.addEventListener('click', () => {
            // 如果当前页不是第一页
            if (currentPage > 1) {
                // 当前页码减1
                currentPage--;
                // 获取当前页面对应的DOM元素
                const currentPageElement = pages[currentPage - 1];
                // 移除当前页面向左翻页的样式类，恢复页面初始状态
                currentPageElement.classList.remove('flipped-left');
            }
        });
    </script>
</body>
</html>

<!-- 动画控制概括：
1. CSS部分：
   - 通过 `perspective` 属性为页面添加3D透视效果，让旋转更具立体感。
   - `transform-style: preserve-3d` 确保子元素保持3D变换。
   - `transform-origin: left` 设置页面以左侧为旋转原点。
   - `transition` 属性为 `transform` 添加1秒的过渡效果，使翻页动画平滑。
   - `.flipped-left` 类通过 `rotateY(-180deg)` 实现向左翻页的旋转效果。

2. JavaScript部分：
   - 通过 `querySelectorAll` 获取所有页面元素，通过 `getElementById` 获取翻页按钮。
   - 使用 `currentPage` 变量记录当前页码。
   - 点击 “向右翻页” 按钮时，为当前页面添加 `.flipped-left` 类，触发向左翻页动画，并更新当前页码。
   - 点击 “向左翻页” 按钮时，移除当前页面的 `.flipped-left` 类，恢复页面状态，并更新当前页码。
-->
